{% extends "base2.html" %}

{% block conteudo %}

<div class="row">
<div class="col-xs-12">
     <strong>{{ pedido }}</strong>
     - Aberto em {{ pedido.aberto }}
     - Usuário: <strong>{{ pedido.usuario }}</strong>.
     {% if not pedido.fechado %}
     {% if pedido.cliente %}Cliente: {% endif %}<a href="/pedido_cliente/{{ pedido.id }}/">{% if pedido.cliente %}{{ pedido.cliente }}{% else %}Cliente não associado{% endif %}.</a>
     {% else %}
     {% if pedido.cliente %}Cliente: {{ pedido.cliente }}{% endif %}
     {% endif %}
</div>
</div>

<div id="tabela" class="row">
<div class="col-xs-12">

<form action="" method="post" role="form">
{% csrf_token %}
<input type="hidden" name="step" va />
<table class="table table-striped table-bordered table-hover table-responsive">
    {% if pedido.itens %}
    <tr>
        <th class="text-center" style="width: 30px;"></th>
        <th class="text-right" style="width: 40px;">#</th>
        <th class="text-right" style="width: 70px;">Horário</th>
        <th class="text-right" style="width: 150px;">Cód</th>
        <th class="text-right">Descrição</th>
        <th class="text-right" style="width: 60px;">Quant.</th>
        <th class="text-right">Val Unit.</th>
        <th class="text-right">Valor Total</th>
    </tr>
    {% for item in pedido.itens %}
    <tr class="{% if item.estado == 0 %}danger riscado italico text-red{% elif item.estado == 3 %}warning italico cinza{% elif item.estado == 4%}success italico cinza{% endif %}" title="{% if item.estado == 0 %}Item excluído{% elif item.estado == 3 %}ITEM GRÁTIS{% elif item.estado == 4 %}Item PAGO{% endif %}">
        <td class="text-center"><input class="form-control" type="checkbox" name="itens[]" value="{{ item.id }}" {% if False and item.estado != 2 %}disabled="disabled"{% endif %} {% if pedido.fechado %}disabled="disabled"{% endif %}></td>
        <td class="text-right">{{ forloop.counter }}</td>
        <td class="text-right">{{ item.data|date:"H:i:s" }}</td>
        <td class="text-right">{{ item.produto.codigo }}</td>
        <td class="text-right">{{ item.produto.descricao }}</td>
        <td class="text-right">{{ item.quantidade }}</td>
        <td class="text-right {% if item.estado != 2 %}riscado{% endif %}">{{ item.produto.preco_de_venda|floatformat:2 }}</td>
        <td class="text-right {% if item.estado != 2 %}riscado{% endif %}"><strong>{{ item.total|floatformat:2 }}</strong></td>
    </tr>
    {% endfor %}
    <tr>
        <th class="text-left" colspan="3">
            <div class="input-group input-group-sm">
                <select id="opcoes" class="form-control text-center" disabled="disabled" title="Selecione algum item" name="opcao">
                    <option value="0">---</option>
                    {% if perms.restaurante.excluir_item_confirmado %}
                    <option class="text-left" value="1">Excluir</option>
                    {% endif %}
                    {% if perms.restaurante.alterar_mesa %}
                    <option class="text-left" value="2">Outra mesa</option>
                    {% endif %}
                    <!-- <option class="text-left" value="3">Marcar pago</option> -->
                    {% if perms.restaurante.excluir_item_confirmado %}
                    <option class="text-left" value="4">Marcar gratuito</option>
                    {% endif %}
                </select>
            </div>
        </th>
        <th>
            <div class="input-group input-group-sm">
                <select id="mesas" class="form-control text-center" disabled="disabled" title="Selecione algum item" name="mesa">
                    <option value="0">---</option>
                    {% for mesa in mesas %}
                    <option class="text-left" value="{{ mesa.id }}">{{ mesa }}</option>
                    {% endfor %}
                </select>
            </div>
        </th>
        <th class="text-right" colspan="3">Total</th>
        <th class="text-right">{{ pedido.total|floatformat:2 }}</th>
    </tr>
    {% endif %}
</table>
</form>
</div>
</div>

<div class="row">
<div class="col-xs-12">
    
        <div class="btn-group pull-left">
            {% if not pedido.fechado %}
            <a class="btn btn-default btn-primary btn-lg" href="/pedido/alterar_mesa/{{ pedido.id }}/" title="Mudar/Agrupar" {% if not perms.restaurante.alterar_mesa %}onclick="alert('Você não tem permissão para alterar a mesa'); return false;"{% endif %}><span class="glyphicon glyphicon-transfer"></span> {{ pedido.mesa }}</a>
            {% else %}
            <a class="btn btn-default btn-danger btn-lg" href="#" title="Fechar" onclick="window.close();"><span class="glyphicon glyphicon-remove"></span> {{ pedido.mesa }}</a>
            {% endif %}
        </div>
        
        <div class="btn-group pull-right dropup">
            
            <div class="btn-group">
                {% if not pedido.fechado %}
                <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                
                <ul class="dropdown-menu" role="menu">
                    <li><a class="btn-lg" href="/pedido/parcial/{{ pedido.mesa.id }}/"><span class="glyphicon glyphicon-print"></span> Parcial detalhado</a></li>
                </ul>
                <a class="btn btn-default btn-lg" href="/pedido/parcial/agrupado/{{ pedido.mesa.id }}/" title="Imprimir" ><span class="glyphicon glyphicon-print"></span>
                    Parcial
                </a>
                {% else %}
                <a class="btn btn-default btn-lg" href="/pedido/parcial/fechado/{{ pedido.id }}/" title="Imprimir" ><span class="glyphicon glyphicon-print"></span>
                    Parcial
                </a>
                {% endif %}
            </div>
            
            {% if not pedido.fechado %}
            <a id="adicionar_produtos" class="btn btn-default btn-lg" href="/pedido/produto/?id={{ pedido.id }}" title="Adicionar produtos" ><span class="glyphicon glyphicon-plus"></span> Produtos</a>
            {% endif %}
            
            <div class="btn-group">
                {% if perms.restaurante.adicionar_pagamento %}
                <a class="btn btn-default btn-lg" href="/pedido/pagamento/?id={{ pedido.id }}" title="Pagamentos" ><span class="glyphicon glyphicon-usd"></span>
                    Pagamento
                </a>
                {% endif %}
                <!-- 
                <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a id="encerrar" class="btn-lg" href="#" onclick="return encerrar({{ pedido.id }}, {{ pedido.mesa.id }}, '{{ csrf_token }}');"><span class="glyphicon glyphicon-check"></span> Encerrar</a></li>
                </ul>
                 -->
            </div>
        </div>
</div>
</div>

{% block template_js %}
<script type="text/javascript">
$(document).ready(function() {
	$("#adicionar_produtos").focus();
	$("html, body").animate({ scrollTop: $(document).height() }, 1000);
	$("#tabela").scrollTop($("#tabela")[0].scrollHeight);
	
	$("input[type=checkbox]:checked").each(function() {
		$(this).parents('tr').addClass("selecionado");
	});
	
	$("input[type=checkbox]").on("click", function() {
		if ($(this).is(':checked')) {
        	$(this).parents('tr').addClass("selecionado");
        } else {
        	$(this).parents('tr').removeClass("selecionado");
        }
		
		var n = $( "input:checked" ).length;
		if (n > 0) {
			$("select#opcoes").removeAttr("disabled", "disabled");
			$("select#opcoes").attr("title", "Selecione uma opção");
		} else {
			$("select").attr("disabled", "disabled");
			$("select#opcoes").attr("title", "Selecione algum item");
			$("select").val($("select option:first").val());
			$("#target").val($("#target option:first").val());
		}
	});
	
	$("select#opcoes").on("change", function() {
		if ($("select#opcoes option:selected").val() != 0 && $("select option:selected").val() != 2) {
			$(this).closest('form').trigger('submit');
		} else {
			if ($("select#opcoes option:selected").val() == 2) {
				$("select#mesas").removeAttr("disabled", "disabled");
			} else {
				$("select#mesas").attr("disabled", "disabled");
			}
		}
	});
	
	$("select#mesas").on("change", function() {
		if ($("select#mesas option:selected").val() != 0) {
			$(this).closest('form').trigger('submit');
		}
	});
	
	$('tr').click(function(event) {
	    if (event.target.type !== 'checkbox') {
	        $(':checkbox', this).trigger('click');
	    }
    });
});

function encerrar(pedido_id, mesa_id, csrf_token) {
    
    $.ajax({
        type: "POST",
        url: "/pedido/pagamento/adicionar/?id=" + pedido_id,
        data: {
            pedido_id: pedido_id,
            valor: "",
            tipo: "0",
            csrfmiddlewaretoken: csrf_token
        },
        async: false,
        success: function(retorno) {
            window.location = '/pedido/fechar/' + mesa_id + '/';
        },
        statusCode: {
            404: function() {
                alert('Pagina não encontrada');
                return false;
            },
            408: function() {
                alert('Não responde');
                return false;
            }
        }
    });
}
</script>
{% endblock %}

{% endblock %}

